<template>
  <MoveModal
    width="100%"
    title="业务材料预览"
    :visible="modalShow"
    @ok="modalShow = false"
    @cancel="modalShow = false"
    :footer="null">
    <a-spin :spinning="spinning">
      <div class="material">
        <!-- <div class="material_head">
          <div class="material_head_label">案号：
            <a-tag>
              {{ applyData.acceptcode }}
            </a-tag>
          </div>
          <div class="material_head_label">申请人：<span style="padding: 0px 10px">{{ applyData.applyname }}</span></div>
          <div class="material_head_label">被申请人:<span style="padding: 0px 10px">{{ applyData.targetname }}</span></div>
        </div>
        <a-divider /> -->
        <div class="material_content" v-if="treeData.length > 0">
          <div class="flex-item-2 material_content_left" v-if="treeShow">
            <a-tree v-if="treeData.length > 0" show-line :tree-data="treeData" default-expand-all @select="onSelect"></a-tree>
          </div>
          <a-icon type="menu-fold" class="material_arrow_div" v-if="treeShow" @click="() => { treeShow = !treeShow }"/>
          <a-icon type="menu-unfold" class="material_arrow_div" v-else @click="() => { treeShow = !treeShow }"/>
          <div class="flex-item-8 material_content_right" v-if="leftFileShow">
            <div class="material_file">
              <a-icon v-if="leftLock" type="lock" class="lock_icon" @click="() => leftLock = false"/>
              <a-icon v-else type="unlock" class="lock_icon" @click="() => leftLock = true"/>
              <div>文件名：<a-tag> {{ oldFile.fileName }} </a-tag></div>
              <a-button class="btn_normal_color" style="height: 24px;" @click="weboffice(1)">编辑</a-button>
              <a-button class="btn_normal_color" style="height: 24px;margin-left:10px" @click="ocrFile(1)">文本识别</a-button>
            </div>
            <iframe
              id="oldIframe"
              v-show="oldFileUrl != ''"
              :src="oldFileUrl"
              width="100%"
              height="100%"
              scrolling="yes"
              frameborder="0" >
            </iframe>
          </div>
          <a-icon type="menu-fold" class="material_arrow_div" v-if="leftFileShow" @click="() => { leftFileShow = !leftFileShow }"/>
          <a-icon type="menu-unfold" class="material_arrow_div" v-else @click="() => { leftFileShow = !leftFileShow }"/>
          <div class="flex-item-8 material_content_right" v-if="rightFileShow">
            <div class="material_file">
              <a-icon v-if="rightLock" type="lock" class="lock_icon" @click="() => rightLock = false"/>
              <a-icon v-else type="unlock" class="lock_icon" @click="() => rightLock = true"/>
              <div>文件名：<a-tag> {{ newFile.fileName }} </a-tag></div>
              <a-button class="btn_normal_color" style="height: 24px;" @click="weboffice(2)">编辑</a-button>
              <a-button class="btn_normal_color" style="height: 24px;margin-left:10px" @click="ocrFile(2)">文本识别</a-button>
            </div>
            <iframe
              id="newIframe"
              v-show="newFileUrl != ''"
              :src="newFileUrl"
              width="100%"
              height="100%"
              scrolling="yes"
              frameborder="0" >
            </iframe>
          </div>
          <a-icon type="menu-fold" class="material_arrow_div" v-if="rightFileShow" @click="() => { rightFileShow = !rightFileShow }"/>
          <a-icon type="menu-unfold" class="material_arrow_div" v-else @click="() => { rightFileShow = !rightFileShow }"/>
        </div>
        <a-empty v-else description="暂无文件" />
      </div>
    </a-spin>

    <MoveModal
      width="45%"
      title="文字识别"
      :visible="ocrViewShow"
      @ok="ocrViewShow = false"
      @cancel="ocrViewShow = false"
    >
      <div style="max-height: 40vh; overflow-y: auto">
        <!-- 新增：固定高度且带有滚动条的容器 -->
        {{ ocrText }}
        <!-- 文字内容 -->
      </div>
    </MoveModal>

  </MoveModal>
</template>

<script>
import { kkfilePreview, webofficeEdit } from '@/utils/util.js'
import { viewApl_main } from '@/api/apply/apl_main'
import { getReviewById } from '@/api/accept/apl_admreview'
import { screenMaterials } from '@/api/accept/aprv_process_materials'
import { APP_USER, APP_DEPT } from '@/store/mutation-types.js'
import storage from 'store'
import { ocrByAttachmentid } from '@/api/ocr/ocr'
export default {
  data () {
    return {
      spinning: false,
      modalShow: false,
      treeData: [],
      applyData: {
        acceptcode: '',
        applyname: '',
        targetname: ''
      },
      applyid: null,
      newFileUrl: null,
      oldFileUrl: null,
      newFile: null,
      oldFile: null,
      currentUser: storage.get(APP_USER), // 登录人信息
      currentDept: storage.get(APP_DEPT), // 登录人部门
      treeShow: true,
      leftFileShow: true,
      rightFileShow: true,
      leftLock: false,
      rightLock: false,

      ocrViewShow: false,
      ocrText: undefined
    }
  },
  created () {
  },
  components: {
    MoveModal: () => import('@/components/Power/MoveModal.vue')
  },
  methods: {
    // 在线编辑文书
    weboffice (type) {
      const userid = this.currentUser.id
      const file = type === 1 ? this.oldFile : this.newFile
      console.log('file', file)
      const url = `${webofficeEdit(file.fileUrl)}&userid=${userid}&applyid=${this.applyid}&attachid=${file.id}`
      console.log('viewfile', url)
      window.open(url)
    },
    reset () {
      this.treeData = []
      this.applyData = {
        acceptcode: '',
        applyname: '',
        targetname: ''
      }
      this.newFileUrl = null
      this.oldFileUrl = null
      this.newFile = null
      this.oldFile = null
      this.applyid = ''
    },
    async init (applyid) {
      this.reset()
      this.applyid = applyid
      // 查询全流程材料
      const res1 = await screenMaterials(this.applyid)
      if (res1.code == 0) {
        this.treeData = res1.data
        if (this.treeData) {
          this.newFileUrl = null
          this.oldFileUrl = null
          this.newFile = null
          this.oldFile = null
          this.treeData.forEach(el => {
            if (el.children) {
              el.children.forEach(el2 => {
                if (el2.fileUrl) {
                  if (!this.oldFile) {
                    this.oldFileUrl = kkfilePreview(el2.fileUrl)
                    this.oldFile = el2
                  }
                  if (!this.newFile) {
                    this.newFileUrl = kkfilePreview(el2.fileUrl)
                    this.newFile = el2
                  }
                }
                if (el2.children) {
                  el2.children.forEach(el3 => {
                    if (!this.oldFile) {
                      this.oldFileUrl = kkfilePreview(el3.fileUrl)
                      this.oldFile = el3
                    }
                    if (!this.newFile) {
                      this.newFileUrl = kkfilePreview(el3.fileUrl)
                      this.newFile = el3
                    }
                  })
                }
              })
            }
          })
        }
        this.modalShow = true
      } else {
        this.modalShow = false
        this.treeData = []
        this.$message.error('当前案件材料为空，无法预览展示')
      }
      // viewApl_main(this.applyid).then(res2 => {
      //   if (res2.code == 0) {
      //     // 案号
      //     this.applyData.acceptcode = res2.data.acceptcode
      //   }
      // })
      // getReviewById(this.applyid).then(res3 => {
      //   if (res3.code == 0) {
      //     // 申请人
      //     this.applyData.applyname = res3.data.applyname
      //     // 被申请人
      //     this.applyData.targetname = res3.data.targetname
      //   }
      // })
    },
    onSelect (key, e) {
      if (e.selectedNodes && e.selectedNodes[0] && e.selectedNodes[0].data.props) {
        const tempFile = this.newFile
        const tempFileUrl = this.newFileUrl
        if (this.leftLock && this.rightLock) {
          return 
        } else if (this.leftLock) {
          this.newFile = e.selectedNodes[0].data.props
          this.newFileUrl = kkfilePreview(this.newFile.fileUrl)
        } else if (this.rightLock) {
          this.oldFile = e.selectedNodes[0].data.props
          this.oldFileUrl = kkfilePreview(this.oldFile.fileUrl)
        } else {
          this.newFile = e.selectedNodes[0].data.props
          this.newFileUrl = kkfilePreview(this.newFile.fileUrl)
          this.oldFile = tempFile
          this.oldFileUrl = tempFileUrl
        }
      }
    },
    async ocrFile (type) {
      const file = type === 1 ? this.oldFile : this.newFile
      console.log('file', file)
      let fileId
      if (file.key) {
        fileId = file.key
      } else {
        fileId = file.dataRef ? file.dataRef.key : ''
      }
      const res = await ocrByAttachmentid(fileId)
      if (res.code == 0) {
        console.log('ocr文本识别：', this.ocrText)
        this.ocrText = res.data
        this.ocrViewShow = true
      } else {
        this.ocrViewShow = false
      }
    },
  }
}
</script>

<style lang="scss" scoped>

  .material {
    display: flex;
    flex-direction: column;
    height: 700px;
  }
  .material_head {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
  }
  .material_head_label {
    margin: 0px 20px;
  }

  .material_file {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin-bottom: 10px;
  }

  .material_content {
    display: flex;
    height: 100%;
  }

  .material_content_left {
    // widows: 100%;
    height: 700px;
    overflow-y: auto;
    min-width: 250px;
  }

  .material_content_right {
    margin: 0px 10px;
    overflow: auto;
    height: 700px;
  }

  .material_arrow_div {
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 5px 5px;
    font-size: 18px;
    border-left: 2px solid #0072C6;
    color: #0072C6;
    cursor: pointer;
    height: 100%;
  }
  .lock_icon {
    font-size: 18px;
    margin-right: 20px;
    color: #0072C6;
    cursor: pointer;
  }
  .transparent-input {
    background-color: transparent; /* 设置背景透明 */
    border: none; /* 移除边框 */
    border-bottom: 1px solid rgb(251, 251, 252); /* 可选：添加底部边框以提升可视度 */
    outline: none; /* 移除默认的输入框外观 */
    color: rgb(119, 166, 253); /* 设置文本颜色 */
    /* 可以根据需要添加更多样式 */
}
</style>
